<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div v-cloak v-if="module && module.background.editable">
        <el-form-item label="背景">
            <el-radio-group v-model="module.background.cat">
                <el-radio label="default">默认</el-radio>
                <el-radio label="none">透明</el-radio>
                <el-radio label="auto">自动</el-radio>
                <el-radio label="custom">自定义</el-radio>
            </el-radio-group>
        </el-form-item>
        <div v-if="module.background.cat == 'custom'">
            <el-form-item label="背景颜色">
                <el-input v-model="module.background.color"></el-input>
            </el-form-item>

            <el-form-item label="背景图片">
                <image-picker v-model="module.background.image"></image-picker>
            </el-form-item>

            <el-form-item label="背景尺寸">
                <el-input placeholder="宽" style="width:100px;" v-model="module.background.width"></el-input>
                <el-input placeholder="高" style="width:100px;" v-model="module.background.height"></el-input>
            </el-form-item>

            <el-form-item label="背景偏移">
                <el-input-number style="width:100px;" placeholder="x" type="number"
                    v-model="module.background.positionX"></el-input-number>
                <el-input-number style="width:100px;" placeholder="y" type="number"
                    v-model="module.background.positionY"></el-input-number>
            </el-form-item>


        </div>
    </div>
</template>

<script>
import ImagePicker from '@/components/ImagePicker'
export default {
    data () {
        return {
            loading: false
        };
    },
    components: {
        ImagePicker,
    },
    props: {
        module: { type: Object, default: null }
    },

    mounted: function () { },

    computed: {},

    methods: {
        colorChange: function (v) {
            // TODO
        }
    }
};
</script>

<style scoped></style>